<template>
	<view>
		<view class="card-list">
			<view class="card-list-item">
				<view class="row01">
					<image mode="aspectFill" :src="bankInfo.bankIcon"></image>
					<text class="name">{{bankInfo.bankName}}</text>
					<text class="number">**** {{bankNum}}</text>
				</view>
				<view class="row02">持卡人：{{username}}</view>
			</view>
		</view>
		<view class="com-btn" @click="update">
			<button>更换结算卡</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isuser: true,
				bankInfo:'',
				username:'',
				bankNum:''
			}
		},
		onLoad(){
		
			this.username = uni.getStorageSync("username");
		},
		onShow() {
		
			this.getInfo();

		},
		methods: {

			update(){
				
				uni.navigateTo({
					url:'./addCard?id='+this.bankInfo.id
				})
			},
			getInfo() {

				let param = {
				}
				let that = this;
				this.$api.bankInfo(param).then(res => {
					
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.bankInfo = res.data;
						that.bankNum = res.data.bankNum.substr(res.data.bankNum.length-4,res.data.bankNum.length);
						
					} else {
						this.$util.$showToast(res.msg, '', 'none');

					}
				})
			},
			getPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.card-list {
		.card-list-item {
			height: 122rpx;
			background: linear-gradient(74deg, #FF7C81 0%, #EF4C53 100%);
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 30rpx;

			.row01 {
				margin-bottom: 20rpx;
				display: flex;
				height: 58rpx;
				line-height: 58rpx;

				image {
					width: 58rpx;
					height: 58rpx;
					margin-right: 20rpx;
				}

				.name {
					flex: auto;
					font-size: 34rpx;
					color: #FFFFFF;
				}

				.number {
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.row02 {
				font-size: 24rpx;
				color: #FFFFFF;
				margin-left: 80rpx;
			}
		}
	}
</style>
